<html>
<head>
  <meta charset="utf-8">
  <title>Test Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/mycss.css">
  <link rel="icon" type="image/x-icon" href="image/logo.png">
  <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
  <script src="bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
 <header>
  <div class="container">
    <div class="row logo-user">
     <div><a href="#"><img src="image/banner_600.png" class="logo"></a></div>
     <div class="user">
      <!-- <div>Welcome <a href="#" class="welcome">Guest</a></div> -->
      <div class="dropdown" style="float: right"><label style="color: #8a6d3b;">Xin chào</label> 
        <a href="#" class="welcome btn btn-warning btn-xs">Henry Thanh Hai</a>
        <span onclick="clickCaret()" class="btn btn-warning btn-xs caret-click">
          <b class="caret"></b>
        </span>
        <ul class="dropdown-menu hide" style="margin-left: 55px;">
          <li><a href="#">Thông tin</a></li>
          <li><a href="#">Tùy chỉnh</a></li>
          <li><a href="#">Đổi mật khẩu</a></li>
        </ul>
      </div>
      <div ="row">
        <div class="reg-log">
          <a href="#" class="btn btn-sm btn-login">Đăng Nhập</a>
          <a href="#" class="btn btn-sm btn-register">Đăng Ký</a>
        </div>
        <div class="clear"></div>
      </div>
    </div>
  </div>
  <div class="row">
    <nav class="navbar navbar-orange" role="navigation">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand navbar-home" href="#"><span class="glyphicon glyphicon-home"></span></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Giải Đề</a></li>
          <li><a href="#">Hỏi Đáp</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle">Tài Nguyên <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Môn học</a></li>
              <li><a href="#">Đề thi</a></li>
              <li><a href="#">Bài kiểm tra</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle">Trợ Giúp <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Trợ Giúp</a></li>
              <li><a href="#">Đề thi</a></li>
              <li><a href="#">Bài kiểm tra</a></li>
            </ul>
          </li>
          <li><a href="#">Về Chúng Tôi</a></li>
        </ul>
      </div>
    </nav>
  </div>
</div>
</header>

<div class="container">
  <script type="text/javascript">
  function checkValidPassword(password){
    var regex = new RegExp("^.{6,30}$");
    return regex.test(password);
  }

  function checkValidEmail(email){
    var regex = new RegExp("[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?");
    return regex.test(email);
  }

  function checkValidFullname(fullname){
    var regex = new RegExp(".{3,100}$");
    return regex.test(fullname);
  }

  function checkValidConfirm(confirm, password){
    return confirm === password;
  }

  function checkValidEditProfile(){
    var fullname = document.getElementById("fullname").value;
    var email = document.getElementById("email").value;

    if(!checkValidFullname(fullname)){
      document.getElementById("invalid-fullname").classList.remove("hidden");
      return false;
    }else{
      if(!document.getElementById("invalid-fullname").classList.contains("hidden")){
        document.getElementById("invalid-fullname").classList.add("hidden");
      }
    }


    if(!checkValidEmail(email)){
      document.getElementById("invalid-email").classList.remove("hidden");
      return false;
    }else{
      if(!document.getElementById("invalid-email").classList.contains("hidden")){
        document.getElementById("invalid-email").classList.add("hidden");
      }
    }

    return true;
  }   

  function checkValidChangePassword(){
    var password = document.getElementById("password").value;
    var newPassword = document.getElementById("new-password").value;
    var confirm = document.getElementById("confirm").value;

     if(!checkValidPassword(password)){
      document.getElementById("invalid-password").classList.remove("hidden");
      return false;
    }else{
      if(!document.getElementById("invalid-password").classList.contains("hidden")){
        document.getElementById("invalid-password").classList.add("hidden");
      }
    }

    if(!checkValidPassword(newPassword)){
      document.getElementById("invalid-new-password").classList.remove("hidden");
      return false;
    }else{
      if(!document.getElementById("invalid-new-password").classList.contains("hidden")){
        document.getElementById("invalid-new-password").classList.add("hidden");
      }
    }


    if(!checkValidConfirm(confirm, newPassword)){
      document.getElementById("invalid-confirm").classList.remove("hidden");
      return false;
    }else{
      if(!document.getElementById("invalid-confirm").classList.contains("hidden")){
        document.getElementById("invalid-confirm").classList.add("hidden");
      }
    }

  }
  </script>

  <script type="text/javascript">
  function editProfile(){
    $("#profie-form .form-group:not(.form-group:first-of-type) label").each(function(){
      $(this).removeClass("text-right");
      $(this).addClass("control-label");
    });

    $(".input-info").each(function(){
      $(this).removeClass("hidden");
    });

    $(".info").each(function(){
      $(this).addClass("hidden");
    });

    $("#hide-btn").removeClass("hidden");

    $("#edit-profile").addClass("hidden");

  }

  function cancelEdit(){
    $("#profie-form .form-group:not(.form-group:first-of-type) label").each(function(){
      $(this).removeClass("control-label");
      $(this).addClass("text-right");
    });

    $(".input-info").each(function(){
      $(this).addClass("hidden");
    });

    $(".info").each(function(){
      $(this).removeClass("hidden");
    });

    $("#hide-btn").addClass("hidden");

    $("#edit-profile").removeClass("hidden");
  }
  </script>
  <div class="row">
    <div class="user-profile-form login login-warning">
      <div class="login-heading"><h3 class="login-title">Thông Tin Cá Nhân</h3></div>
      <div class="login-body">
        <div>
          <form class="form-horizontal col-xs-6 col-xs-offset-3" id="profie-form" role="form" onsubmit="return checkValidEditProfile()">
            <div class="form-group"><label class="col-xs-4 text-right">Tên đăng nhập</label><div class="col-xs-8">hainnt</div></div>
            <div class="form-group">
              <label class="col-xs-4 text-right">Họ tên</label>
              <div class="col-xs-8">
                <span class="info">Nguyễn Ngọc Thanh Hải</span>
                <span class="input-info hidden"><input type="text" value="Nguyễn Ngọc Thanh Hải" class="form-control" id="fullname"></span>
              </div>
            </div>
            <div class="col-md-offset-6">
              <p class="invalid-mess hidden" id="invalid-fullname">Họ tên không hợp lệ</p>
            </div>
            <div class="form-group">
              <label class="col-xs-4 text-right">Email</label>
              <div class="col-xs-8">
                <span class="info">hainnt1302@gmail.com</span>
                <span class="input-info hidden"><input type="text" value="hainnt1302@gmail.com" class="form-control" id="email"></span>
              </div>
            </div>
            <div class="col-md-offset-6">
              <p class="invalid-mess hidden" id="invalid-email">Email không hợp lệ</p>
            </div>
            <div class="form-group hidden" id="hide-btn"><input class="btn btn-warning col-xs-2 col-xs-offset-6" type="button" value="Hủy" onclick="cancelEdit()">
              <input class="btn btn-success col-xs-2 col-xs-offset-1" type="submit" value="Lưu">
            </div>          
          </form>

          <button class="btn btn-success col-xs-offset-5" id="edit-profile" onclick="editProfile()">Sửa</button>
        </div>
        <div class="clearfix"></div>
        <hr/>
        <form class="form-horizontal col-xs-6 col-xs-offset-3" role="form" id="change-pass-form" onsubmit="return checkValidChangePassword()">
          <!-- <p class="invalid-mess text-center">Invalid username or password</p> -->
          <div class="form-group">
            <label class="col-xs-4 control-label">Mật khẩu</label>
            <div class="col-xs-8">
              <input type="password" class="form-control" id="password" placeholder="Mật khẩu">
            </div>
          </div>
          <div class="col-xs-offset-6">
            <p class="invalid-mess hidden" id="invalid-password">Invalid password!</p>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">Mật khẩu mới</label>
            <div class="col-xs-8">
              <input type="password" class="form-control" id="new-password" placeholder="Mật khẩu mới">
            </div>
          </div>
          <div class="col-md-offset-6">
            <p class="invalid-mess hidden" id="invalid-new-password">Invalid password!</p>
          </div>
          <div class="form-group">
            <label class="col-xs-4 control-label">Nhập lại</label>
            <div class="col-xs-8">
              <input type="password" class="form-control" id="confirm" placeholder="Nhập lại">
            </div>
          </div>
          <div class="col-md-offset-6">
            <p class="invalid-mess hidden" id="invalid-confirm">Mật khẩu nhập lại không đúng!</p>
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-success col-xs-4 col-xs-offset-4" value="Đổi mật khẩu">
          </div>
        </form>
      </div>
    </div>

    <div class="user-info-form login login-warning">
      <div class="login-heading"><h3 class="login-title">Thông Tin Tài Khoản</h3></div>
      <div class="login-body">
        <div><label class="col-xs-7">Thứ hạng</label>2</div>
        <div class="clear"></div>
        <div><label class="col-xs-7">Điểm</label>1324</div>
        <div class="clear"></div>
        <div><label class="col-xs-7">Cấp</label>23</div>
        <div class="clear"></div>
        <div><label class="col-xs-7">Phòng đã tạo</label>20</div>
        <div class="clear"></div>
        <div><label class="col-xs-7">Phòng tham gia</label>122</div>
        <div class="clear"></div>
      </div>
    </div>
  </div>

</div>

<footer class="footer">
  <div class="container">
    <div class="website-info text-center">
      <h5>CuNgonBai.com © 2014 - Website ôn thi hàng đầu Việt Nam</h5>
      <h6>QwerTy Group</h6>
    </div>
    <div class="row"></div>
  </div>
</footer>

</body>
</html>